<template>
	<view class="content">
		<view class="content-top">
			<view class="content-top-title">
				<view class="content-top-title-left">订单信息</view>
				<!-- 待接单 -->
				<view class="content-top-title-right" v-if='orderDetail.status == 0 && orderDetail.is_evaluate == 0' style="color:#00CB8B">{{orderDetail.status_text}}</view>
				<!-- 已接单 -->
				<view class="content-top-title-right" v-if='orderDetail.status == 7 && orderDetail.is_evaluate == 0' style="color:#00CB8B">{{orderDetail.status_text}}</view>
				<!-- 已完成 -->
				<view class="content-top-title-right" v-if='orderDetail.status == 9 && orderDetail.is_evaluate == 0' style="color:#333">{{orderDetail.status_text}}</view>
				<!-- 已取消 -->
				<view class="content-top-title-right" v-if='orderDetail.status == -1 && orderDetail.is_evaluate == 0' style="color:#333">{{orderDetail.status_text}}</view>
				<!-- 已评论 -->
				<view class="content-top-title-right" v-if='orderDetail.status == 9 && orderDetail.is_evaluate == 1' style="color:#00CB8B">{{orderDetail.status_text}}</view>
			</view>
			<view class="content-name-box">
				<view class="content-name-box-top">{{orderDetail.contact}} {{orderDetail.mobile}}</view>
				<view class="content-name-box-bottom">{{orderDetail.province}}{{orderDetail.city}}{{orderDetail.country}}{{orderDetail.address}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">订单编号</view>
				<view class="content-item-right">{{orderDetail.ordernum}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">预约时间</view>
				<view class="content-item-right">{{orderDetail.yuyue_date}} {{orderDetail.yuyue_start_time}}~{{orderDetail.yuyue_end_time}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">下单时间</view>
				<view class="content-item-right">{{orderDetail.ordertime_text}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">回收类别</view>
				<view class="content-item-right">{{orderDetail.items}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">预估重量</view>
				<view class="content-item-right">{{orderDetail.weight}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">照片信息</view>
				<view class="content-item-right">
					<image @click="yulanImg(index)" class="tupian" v-for="(item,index) in orderDetail.images_url" :key="index" :src="item" mode="widthFix"></image>
				</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">备注信息</view>
				<view class="content-item-right">{{orderDetail.remark}}</view>
			</view>
			<view class="content-item" >
				<view class="content-item-left">结算方式</view>
				<view class="content-item-right">{{orderDetail.sett_type == 1 ? '线上' : '线下'}}</view>
			</view>
			<view class="content-item" v-if='orderDetail.sett_type == 2'>
				<view class="content-item-left">线下付款凭证</view>
				<view class="content-item-right">
					<image @click="yulanpay()" class="pay-image-i" :src="orderDetail.pay_image" ></image>
				</view>
			</view>
		</view>
		
		<view class="content-top" style="margin-top: 12px;" v-if='orderDetail.status != 0 && orderDetail.status != -1'>
			<view class="content-top-title">				<view class="content-top-title-left">回收信息</view>			</view>
			<view class="content-item" style="margin-top: 20px;">
				<view class="content-item-left">回收员</view>
				<view class="content-item-right">{{orderDetail.recycler_name}}</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">联系电话</view>
				<view class="content-item-right">{{orderDetail.recycler_mobile}}</view>
			</view>
			
			<view style="margin-top: 30px;" v-for="(item,index) in orderDetail.recyclerInfo" :key='index' >
				<view class="content-item">
					<view class="content-item-left">回收类别</view>
					<view class="content-item-right">{{item.recycler_items}}</view>
				</view>
				<view class="content-item">
					<view class="content-item-left">回收重量</view>
					<view class="content-item-right">{{item.recycler_weight}}kg</view>
				</view>
				<view class="content-item">
					<view class="content-item-left">回收单价</view>
					<view class="content-item-right">{{item.recycler_price}}元</view>
				</view>
			</view>
			
			<view style="margin-top: 30px;" v-if='orderDetail.status == 9'>
				<view class="content-item">
					<view class="content-item-left" style="line-height: 20px;">回收总金额</view>
					<view class="content-item-right" style="color: red;font-size: 20px;">{{orderDetail.price}}元</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	
	export default{
		data(){
			return{
				orderDetail:{}
			}
		},
		onLoad(options) {
			console.log(options)
			this.getOrderDetailFun(options.id)
		},
		methods:{
			getOrderDetailFun(id){
				let _this = this
				http.getUserOrderDetail({id:id}).then((res)=>{
					console.log(res)
					if(res.data.code == 1){
						_this.orderDetail = res.data.data
					}
				})
			},
			yulanImg(index){
				let _this = this
				uni.previewImage({
					urls: _this.orderDetail.images_url,
					current:index
				})
			},
			yulanpay(){
				let _this = this
				let imgUrl = []
				imgUrl.push(_this.orderDetail.pay_image)
				uni.previewImage({
					urls: imgUrl,
				})
			},
		}
	}
</script>

<style>
	.content{width: 100%;min-height: 100vh;background-color: #F8F9FD;box-sizing: border-box;padding: 12px;font-family: 'PingFang Bold';}
	.content-top{width: 100%;background: #fff;border-radius: 10px;box-sizing: border-box;padding: 15px;}
	.content-top-title{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.content-top-title-left{border-left: 2px solid #00CB8B;box-sizing: border-box;padding-left: 5px;font-size: 14px;line-height: 17px;}
	.content-top-title-right{font-size: 16px;}
	.content-name-box{width: 100%;margin-top: 20px;margin-bottom: 30px;}
	.content-name-box-top{font-size: 14px;color: #333;}
	.content-name-box-bottom{font-size: 12px;color: #999;margin-top: 5px;}
	.content-item{width: 100%;display: flex;flex-direction: row;margin-bottom: 8px;}
	.content-item-left{font-size: 14px;color: #999;margin-right: 24px;width: 75px;text-align: justify;text-align-last: justify;}
	.content-item-right{font-size: 14px;color: #333;display: flex;flex-direction: row}
	.tupian{width: 50px;margin-right: 10px;height: 50px;border-radius: 5px;}
	.pay-image-i{width: 100px;height: 100px;}
</style>